<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增人员异动')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<style>
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }


    input[type="number"] {
        -moz-appearance: textfield;
    }


</style>
<body>
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="dv">
    <form class="form-horizontal m" id="empChange-add" AUTOCOMPLETE="OFF">
        <h4 class="form-header h4">基本信息</h4>
        <div class="form-group">
            <div class="col-sm-12">

                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">单位：</label>
                    <div class="col-sm-8">
                        <select name="compId" id="compId" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option th:each="pro:${userComp}" th:value="${pro.compId}"
                                    th:text="${pro.compName}"></option>
                        </select>
                    </div>

                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">年份：</label>
                    <div class="col-sm-8">
                        <select name="years" id="years" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                            <option value="2022">2022</option>
                            <option value="2023">2023</option>
                            <option value="2024">2024</option>
                            <option value="2025">2025</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">月份：</label>
                    <div class="col-sm-8">
                        <select name="months" id="months" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option value="1">一月</option>
                            <option value="2">二月</option>
                            <option value="3">三月</option>
                            <option value="4">四月</option>
                            <option value="5">五月</option>
                            <option value="6">六月</option>
                            <option value="7">七月</option>
                            <option value="8">八月</option>
                            <option value="9">九月</option>
                            <option value="10">十月</option>
                            <option value="11">十一月</option>
                            <option value="12">十二月</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">月初人数：</label>
                    <div class="col-sm-8">
                        <input id="monthFirstNum" name="monthFirstNum" class="form-control" type="number"
                               placeholder="请输入月初人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">入职人数：</label>
                    <div class="col-sm-8">
                        <input id="entryNum" name="entryNum" class="form-control" type="number" placeholder="入职人数"
                               required>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4" id="monthTotalQuitNum">本月离职（0）人</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">主动离职：</label>
                    <div class="col-sm-8">
                        <input id="activeQuitNum" name="activeQuitNum" class="form-control" type="number"
                               placeholder="请输入主动离职人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">被动离职：</label>
                    <div class="col-sm-8">
                        <input id="passiveQuitNum" name="passiveQuitNum" class="form-control" type="number"
                               placeholder="请输入被动离职人数" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">主动离职率：</label>
                    <div class="col-sm-8">
                        <input id="activeQuitRate" name="activeQuitRate" class="form-control" type="text" disabled>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">总离职率：</label>
                    <div class="col-sm-8">
                        <input id="totalQuitRate" name="totalQuitRate" class="form-control" type="text" disabled>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4" id="monthTotalChangeNum">本月异动（0）人</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">调入：</label>
                    <div class="col-sm-8">
                        <input id="transferInNum" name="transferInNum" class="form-control" type="number"
                               placeholder="请输入调入人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">调出：</label>
                    <div class="col-sm-8">
                        <input id="callOutNum" name="callOutNum" class="form-control" type="number"
                               placeholder="请输入调出人数" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">晋升：</label>
                    <div class="col-sm-8">
                        <input id="promotionNum" name="promotionNum" class="form-control" type="number"
                               placeholder="请输入晋升人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">降职：</label>
                    <div class="col-sm-8">
                        <input id="demotionNum" name="demotionNum" class="form-control" type="number"
                               placeholder="请输入降职人数" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">调岗：</label>
                    <div class="col-sm-8">
                        <input id="postTransferNum" name="postTransferNum" class="form-control" type="number"
                               placeholder="请输入调岗人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">转正：</label>
                    <div class="col-sm-8">
                        <input id="justNum" name="justNum" class="form-control" type="number" placeholder="请输入转正人数"
                               required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">调薪：</label>
                    <div class="col-sm-8">
                        <input id="changeSalary" name="changeSalary" class="form-control" type="number"
                               placeholder="请输入调薪人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">月末人数：</label>
                    <div class="col-sm-8">
                        <input id="monthEndNum" name="monthEndNum" class="form-control" type="text" disabled>
                    </div>
                </div>
            </div>

        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>

<script type="text/javascript">
    var prefix = ctx + 'empChange';
    var monthTotalQuitNum = 0;//本月离职总人数
    var activeQuitRate = 0;//主动离职率
    var totalQuitRate = 0;//总离职率
    var monthTotalChangeNum = 0;//本月异动总人数
    var monthEndNum = 0;//月末人数
    var data;
    $(function () {
        $("input").change(function () {
            monthTotalQuitNum = Number($("#activeQuitNum").val()) + Number($("#passiveQuitNum").val());
            if (monthTotalQuitNum > Number($("#monthFirstNum").val())) {
                alert("离职人数不得大于月初人数！");
                $("#activeQuitNum,#passiveQuitNum").val("");
                $("#activeQuitRate").val("");
                $("#totalQuitRate").val("");
                $("#monthTotalQuitNum").text("本月离职（" + 0 + "）人");
            } else {
                $("#monthTotalQuitNum").text("本月离职（" + monthTotalQuitNum + "）人");
            }//本月离职
            monthTotalChangeNum = Number($("#transferInNum").val()) + Number($("#callOutNum").val()) + Number($("#promotionNum").val()) + Number($("#demotionNum").val()) + Number($("#postTransferNum").val()) + Number($("#justNum").val()) + Number($("#changeSalary").val());
            $("#monthTotalChangeNum").text("本月异动（" + monthTotalChangeNum + "）人");//本月异动

            if (Number($("#monthFirstNum").val()) > 0) {

                activeQuitRate = (Number($("#activeQuitNum").val()) / Number($("#monthFirstNum").val()) * 100).toFixed(2) + "%";
                $("#activeQuitRate").val(activeQuitRate);
                totalQuitRate = ((Number($("#activeQuitNum").val()) + Number($("#passiveQuitNum").val())) / Number($("#monthFirstNum").val()) * 100).toFixed(2) + "%";
                $("#totalQuitRate").val(totalQuitRate);
                monthEndNum = Number($("#monthFirstNum").val()) + Number($("#entryNum").val()) + Number($("#transferInNum").val()) - monthTotalQuitNum - Number($("#callOutNum").val());
                $("#monthEndNum").val(monthEndNum);
            }
            if (monthEndNum < 0 || Number($("#monthFirstNum").val()) == 0) {
                $("#activeQuitRate").val("");
                $("#totalQuitRate").val("");
                $("#monthEndNum").val("");
            }
        })


    })

    function validform(formId) {
        return $(formId).validate()
    }


    function submitHandler() {
        data = {
            "compId": $("#compId").val(),
            "years": $("#years").val(),
            "months": $("#months").val(),
            "monthFirstNum": $("#monthFirstNum").val(),
            "entryNum": $("#entryNum").val(),
            "monthTotalQuitNum": monthTotalQuitNum,
            "activeQuitNum": $("#activeQuitNum").val(),
            "passiveQuitNum": $("#passiveQuitNum").val(),
            "activeQuitRate": activeQuitRate,
            "totalQuitRate": totalQuitRate,
            "monthTotalChangeNum": monthTotalChangeNum,
            "transferInNum": $("#transferInNum").val(),
            "callOutNum": $("#callOutNum").val(),
            "promotionNum": $("#promotionNum").val(),
            "demotionNum": $("#demotionNum").val(),
            "postTransferNum": $("#postTransferNum").val(),
            "justNum": $("#justNum").val(),
            "changeSalary": $("#changeSalary").val(),
            "monthEndNum": monthEndNum
        }
        if (validform("#empChange-add").form()) {
            //通过表单验证
            if ($("#compId").val() == "" || $("#months").val() == "" || $("#years").val() == "") {
                alert("请检查单位、年份和月份是否选择!");
                return false;
            } else {
                $.ajax({
                    url: prefix + '/findCompMonthIsNull',
                    type: 'POST',
                    data: {
                        "months": $("#months").val(),
                        "compId": $("#compId").val(),
                        "years": $("#years").val(),
                    },
                    success: function (row) {
                        console.log(row);
                        if (row.code == 0) {
                            $.operate.save(prefix + "/add", data);
                            //parent.sum();
                        } else {
                            alert(row.message);
                        }
                    }
                })

            }
        } else {
            //校验不通过.
        }


    }
</script>
</div>
</body>
</html>